<template>
	<view class="container">
		<!-- 自定义导航栏 transparent-->
		<uni-nav-bar backgroundColor="#fff" :border="false" :fixed="true" :statusBar="true">
			<block v-slot:left>
				<uni-icons type="back" size="20" color="#000" @click="back"></uni-icons>
			</block>
			<view class="navtitle">
				我的评价
			</view>
			<block v-slot:right>
				<view class="btns"  @click="pfen">
					发布
				</view>
			</block>
		</uni-nav-bar>
		<view class="content" v-if="data.lists.length">
			<view class="goodslist">
				<view class="item" v-for="(item,indexs) in data.lists">
					<view class="goods">
						<view class="goodsimg">
							<image :src="data.list[indexs].goods.img" mode="aspectFill"></image>
						</view>
						<view class="goodsbox">
							<view class="name">
								{{data.list[indexs].goods.name}}
							</view>
							<view class="gg">
								{{data.list[indexs].attributes}}
							</view>
						</view>
					</view>
					<view class="pj">
						<view class="">
							商品描述
						</view>
						<view class="xing">
							<view class="xings" v-for="(items,index) in item.star" @click="item.star=index+1">
								<image src="https://img.fubaozx.cn/static/oldImg/169950174664.png" mode="aspectFill"></image>
							</view>
							<view class="xings" v-for="(items,index) in (5-item.star)" @click="item.star=(item.star+index+1)">
								<image src="https://img.fubaozx.cn/static/oldImg/16995017591212.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="">
							{{data.pjlist[item.star-1]}}
						</view>
					</view>
					<view class="textarea">
						<uni-easyinput type="textarea" v-model="item.content" :styles="data.styles" autoHeight  placeholder="宝贝满足你的期待吗？说说他的优点以及不足的地方吧"></uni-easyinput>
					</view>
					<view class="updade">
						<view class="images" v-for="(itemss,indexsss) in item.img"  @click="data.index=indexs">
							<image :src="itemss" mode="aspectFill" ></image>
							<view class="delete" @click="imglistdelete(indexsss)"></view>
						</view>
						<view class="images" @click="$Uplode(updadeimage)">
							<image src="https://img.fubaozx.cn/static/oldImg/16995017823844.png" mode="aspectFill" @click="data.index=indexs"></image>
						</view>
						<view class="box">
							<view class="text1">
								上传图片
							</view>
							<view class="text2">
								内容丰富的评价更容易引起关注
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goodslist">
				<view class="item">
					<view class="title" v-if="data.list.length">
						{{data.list[0].business_id!=0?data.list[0].business.name:$store.state.name}}
					</view>
					<view class="pj">
						<view class="">
							店铺评分
						</view>
						<view class="xing">
							<view class="xings" v-for="(item,index) in data.shop_star" @click="data.shop_star=index+1">
								<image src="https://img.fubaozx.cn/static/oldImg/169950174664.png" mode="aspectFill" ></image>
							</view>
							<view class="xings" v-for="(item,index) in (5-data.shop_star)" @click="data.shop_star=(data.shop_star+index+1)">
								<image src="https://img.fubaozx.cn/static/oldImg/16995017591212.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="">
							{{data.pjlist[data.shop_star-1]}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		star:5,
		shop_star:5,//店铺评分
		styles:{
			backgroundColor: '#f5f5f5'
		},//文本样式
		list:[],
		lists:[],
		pjlist:['非常差','差','一般','好','非常好'],
		index:5,//上传选中
	})
	onLoad((option)=>{
		orderDetails(option.id)//获取订单
	})
	onShow(()=>{
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})

	function back(){//返回
		uni.navigateBack()
	}
	function updadeimage(num){//上传图片
		console.log(num,data.index)
		data.lists[data.index].img.push(num)
	}
	function imglistdelete(index){//删除图
		data.lists[data.index].img.splice(index, 1)
	}
	function orderDetails(id){//获取订单
			proxy.$request({
				url:`api/order/`,
				method:'PUT',
				data:{
					order:id
				},
				success:(res)=>{
					// data.list=res.data[0]
					for (let var1 in res.data) {
					data.list=res.data[var1]
						res.data[var1].forEach(item=>{
							data.lists.push({
								content:'',
								star:5,
								order_id:Number(item.goods.order_id),
								shop_star:1,
								img:[]
							})
						})
					}
					// res.data[0].forEach(item=>{

					// })
				}
			})
		}
		function pfen(){
			data.lists.forEach(item=>{
				item.shop_star=data.shop_star
				if(!item.content){
					uni.showToast({
						icon:'none',
						title:'请填写商品评价'
					})
					return
				}
				let updata={
					content:item.content,
					star:item.star,
					order_id:item.order_id,
					shop_star:data.shop_star,
					img:JSON.stringify(item.img)
				}
				proxy.$request({
					url:`api/addGoodsComments/`,
					method:'post',
					data:updata,
					success:(res)=>{
						uni.showToast({
							icon:'none',
							title:res.errmsg
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			})
		}
</script>

<style lang="scss" scoped>
	.container{
		padding:0 30upx 30upx 30upx;
		.content{
			padding-top: 20upx;
			.goodslist{
				margin-bottom: 30upx;
				.item{
					padding: 30upx;
					background-color: #fff;
					border-radius: 20upx;
					margin-bottom: 30upx;
					.goods{
						display: flex;
						.goodsimg{
							width: 80upx;
							height: 80upx;
							margin-right: 20upx;
							image{
								width: 80upx;
								height: 80upx;
								border-radius: 10upx;
							}
						}
						.goodsbox{
							.name{
								font-size: 28upx;
								font-weight: bold;
							}
							.gg{
								font-size: 24upx;
								color: #999;
							}
						}
					}
					.pj{
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 20upx 0;
						align-items: center;
						font-size: 28upx;
						.xing{
							width: 60%;
							display: flex;
							.xings{
								margin-right: 32upx;
								image{
									width: 32upx;
									height: 32upx;
								}
							}
						}
					}
					.textarea{

					}
					.updade{
						display: flex;
						align-items: center;
						margin-top: 20upx;
						flex-wrap: wrap;
						.images{
							width: 100upx;
							height:100upx ;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 1upx dashed #999;
							border-radius: 8px;
							margin-right: 20upx;
							position: relative;
							margin-bottom: 20upx;
							image{
								width: 60upx;
								height:60upx ;
							}

							.delete{
								width: 40upx;
								height: 40upx;
								position: absolute;
								top: -20upx;
								right: -20upx;
								background-image: url('https://img.fubaozx.cn/static/oldImg/16995018431329.png');
								background-repeat: no-repeat;
								background-size: 100%;
							}
						}
						.box{
							.text1{
								font-size: 28upx;
								margin-bottom: 20upx;
							}
							.text2{
								font-size: 24upx;
								color: #999;
							}
						}
					}
				}
			}
		}
	}
.navtitle{
	text-align: center;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32upx;
}
	.btns{
		background-color:#FF4A01 ;
		padding: 10upx 20upx;
		color: #fff;
		border-radius: 30upx;
	}
</style>
